<template>
    <el-form ref="form" label-width="80px">
        <el-row style="display: flex;height: 40px;">
            <el-form-item label="选择年月">
                <el-date-picker
                    format="yyyy-MM"
                    value-format="yyyy-MM"
                    v-model="chooseMonth"
                    type="month"
                    placeholder="选择月">
                </el-date-picker>
            </el-form-item>
            <!--            <el-col :span="10">-->
            <!--                <el-col :span="8">-->
            <!--                    <el-form-item label="省份" prop="province">-->
            <!--                        <el-select v-model="searchForm.provinceId"-->
            <!--                                   filterable-->
            <!--                                   placeholder="请选择"-->
            <!--                                   @change="selectProvince">-->
            <!--                            <el-option v-for="province in provinceList"-->
            <!--                                       :key="province.areaId"-->
            <!--                                       :label="province.areaName"-->
            <!--                                       :value="province.areaId"></el-option>-->
            <!--                        </el-select>-->
            <!--                    </el-form-item>-->
            <!--                </el-col>-->
            <!--                <el-col :span="8">-->
            <!--                    <el-form-item label="市" prop="city">-->
            <!--                        <el-select v-model="searchForm.cityId"-->
            <!--                                   filterable-->
            <!--                                   placeholder="请选择"-->
            <!--                                   @change="selectCity">-->
            <!--                            <el-option v-for="city in cityList"-->
            <!--                                       :key="city.areaId"-->
            <!--                                       :label="city.areaName"-->
            <!--                                       :value="city.areaId"></el-option>-->
            <!--                        </el-select>-->
            <!--                    </el-form-item>-->
            <!--                </el-col>-->
            <!--                <el-col :span="8">-->
            <!--                    <el-form-item label="区县">-->
            <!--                        <el-select v-model="searchForm.regionId"-->
            <!--                                   filterable-->
            <!--                                   placeholder="请选择"-->
            <!--                                   @change="selectArea">-->
            <!--                            <el-option v-for="area in areaList"-->
            <!--                                       :key="area.areaId"-->
            <!--                                       :label="area.areaName"-->
            <!--                                       :value="area.areaId"></el-option>-->
            <!--                        </el-select>-->
            <!--                    </el-form-item>-->
            <!--                </el-col>-->
            <!--            </el-col>-->
            <el-button style="margin-left: 20px;" type="primary" @click="search">报告查询</el-button>
            <!--            <el-button style="margin-left: 20px;" type="primary" @click="areaSearch">区县查询</el-button>-->
            <!--            <el-button style="margin-left: 20px;" type="primary" @click="reset">重置</el-button>-->

            <!--            <el-button style="margin-left: 20px;" type="primary" @click="exportPdf">导出PDF</el-button>-->
            <!--            <el-button style="margin-left: 20px;" type="primary" @click="exportWord">导出WORD</el-button>-->
        </el-row>
    </el-form>
</template>

<script>
export default {
    data () {
        return {
            searchForm: {
                evalYear: wfy.format('yyyy', new Date()),
                area: '',
                city: '',
                province: '',
                areaId: null,
                cityId: null,
                regionId: null,
                region: null,
                provinceId: '',
            },
            yearsList: [],
            provinceList: [],
            cityList: [],
            areaList: [],
            chooseMonth: "",
            evalYear: '2024',
            reginId: '110106000000',
            //yearsList : [],
            regin: '',
            //areaList : this.$store.state.user.area.area,
        }
    },
    mounted () {
        this.init()
    },
    methods: {
        // 默认设置某些数据
        init () {
            this.yearsList = []
            for (let i = 2024; i < 2060; i++) {
                this.yearsList.push({
                    value: i,
                    label: i
                })
            }
            this.listAreaByParentId().then(({data}) => {
                this.provinceList = data
            })
        },
        listAreaByParentId (pid) {
            if (!pid) pid = 0
            return this.$http({
                url: this.$http.adornUrl(`/admin/area/listByPidForUid`),
                method: 'get',
                params: this.$http.adornParams({
                    pid: pid,
                    uid: this.$store.state.user.id
                })
            })
        },
        // 选择省
        selectProvince (val) {
            console.log('🚀 ~ val', val)

            let findProvince = this.provinceList.find((item) => {
                return item.areaId === val
            })
            console.log('🚀 ~ findProvince', findProvince)
            this.searchForm.province = findProvince.areaName

            this.searchForm.cityId = null
            this.searchForm.city = ''
            // 获取城市的select
            this.listAreaByParentId(val).then(({data}) => {
                this.cityList = data
            })
        },
        // 选择市
        selectCity (val) {
            let findCity = this.cityList.find((item) => {
                return item.areaId === val
            })
            console.log('🚀 ~ findCity', findCity)
            this.searchForm.city = findCity.areaName

            this.searchForm.areaId = null
            this.searchForm.area = ''
            // 获取区的select
            this.listAreaByParentId(val).then(({data}) => {
                this.areaList = data
            })
        },
        selectArea (val) {
            let findArea = this.areaList.find((item) => {
                return item.areaId === val
            })
            console.log('🚀 ~ findArea', findArea)
            //this.searchForm.area = findArea.areaName;
            this.searchForm.region = findArea.areaName
        },
        reset () {
            this.searchForm.cityId = null
            this.searchForm.city = null
            this.searchForm.province = null
            this.searchForm.provinceId = null
            this.searchForm.area = null
            this.searchForm.areaId = null
            this.searchForm.region = null
            this.searchForm.regionId = null
            this.evalYear = wfy.format('yyyy', new Date())
        },
        search () {
            // if (wfy.empty(this.evalYear)) {
            // 	this.$alert('请先选择年度', '友情提醒')
            // 	return
            // }
            // if (wfy.empty(this.searchForm.regionId)) {
            //
            // 	console.log('🚀 ~ serachForm', this.searchForm)
            // 	this.$alert('请先选择区县', '友情提醒')
            // 	return
            // }
            this.$emit('search', {
                chooseMonth: this.chooseMonth,
                evalYear: this.evalYear,
                reginId: this.searchForm.regionId,
                regin: this.searchForm.region
            })
        },
        areaSearch(){
            if (wfy.empty(this.evalYear)) {
                this.$alert('请先选择年度', '友情提醒')
                return
            }
            if (wfy.empty(this.searchForm.regionId)) {

                console.log('🚀 ~ serachForm', this.searchForm)
                this.$alert('请先选择区县', '友情提醒')
                return
            }
            this.$emit('areaSearch', {
                evalYear: this.evalYear,
                reginId: this.searchForm.regionId,
                regin: this.searchForm.region
            })
        },
        /*selectArea(val){
		  let findArea = this.areaList.find((item) => {
			return item.code === val
		  })
		  console.log('🚀 ~ findArea', findArea)
		  this.regin = findArea.name;
		},*/

        exportPdf () {
            this.$emit('exportPdf')
        },
        exportWord () {
            this.$emit('exportWord')
        }
    }
}
</script>

<style lang="scss" scoped>

</style>
